<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" width="70" align="center" type="index"/>
            <el-table-column label="头像" align="center" prop="headimgUrl" width="80">
                    <template slot-scope="scope">
                        <el-image
                            :src="preFix + scope.row.headimgUrl"
                            class="story-image"
                            :preview-src-list="[preFix + scope.row.headimgUrl]"
                            fit="cover"
                        >
                            <div slot="placeholder" class="image-slot">
                            加载中...
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
            
            <el-table-column label="昵称" align="center" prop="nickName" />
            <el-table-column label="爱情宣言" align="center" prop="loveDeclaration" />
            <el-table-column label="个性标签" align="center" prop="personalityTags" />
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="120px"
            >
                <template slot-scope="scope">
                    <!-- <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-thumb"
                        @click="handleVote(scope.row)"
                    >
                        点赞
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
    </div>
</template>

<script>
import { listInterMsg } from "@/api/interact"; 

export default {
  name: "interactiveMessage",//互动留言
  components: {},
  data() {
    return {
      // 搜索框配置
      searchData: [
        { type: "input", name: "故事标题:", key: "storyTitle", placeholder: "请输入故事标题" },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      preFix: process.env.VUE_APP_BASE_API,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索框事件 + 重置事件
    handleSearchChild(data) {
      let querySearch = JSON.parse(JSON.stringify(data[0]));
      switch (data[1]) {
        case "search": // 搜索框
          this.queryParams = querySearch;
          this.handleQuery();
          break;
        case "reset": // 重置按钮
          this.queryParams = {};
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          this.getList();
          break;
      }
    },
    /** 查询故事列表 */
    getList() {
      this.loading = true;
      listInterMsg(this.queryParams).then((response) => {
        this.tableData = response.rows;
        // this.tableData = [
        //     { storyTitle: '《时光邮局里的蝴蝶标本》', voting: '12865' },
        //     { storyTitle: '《雨夜便利店的最后一支冰淇淋》', voting: '8920' },
        //     { storyTitle: '《地铁末班车的手语告白》', voting: '5678' },
        //     { storyTitle: '《银杏树下的交换日记》', voting: '3450' },
        //     { storyTitle: '《跨海大桥上的追风筝少年》', voting: '9812' },
        //     { storyTitle: '《旧相机里的百岁约定》', voting: '15234' },
        //     { storyTitle: '《深夜面包房的肉桂香气》', voting: '7654' },
        //     { storyTitle: '《滑雪场的意外拥抱》', voting: '4321' },
        //     { storyTitle: '《图书馆角落的钢笔情书》', voting: '6789' },
        //     { storyTitle: '《鼓浪屿灯塔下的漂流瓶》', voting: '11023' }
        // ]
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 点赞操作 */
    handleVote(row) {
      this.$confirm("是否确认对该故事进行点赞?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
        //   updateVoteStory(row.storyId).then((response) => {
        //     if (response.success) {
        //       this.$message.success("点赞成功");
        //       row.voting += 1; // 更新点赞数
        //     } else {
        //       this.$message.error("点赞失败");
        //     }
        //   });
        })
        .catch(() => {
          this.$message.info("已取消点赞操作");
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
  },
};
</script>

<style scoped>

</style>